<!--  -->
<template>
  <view class="c-select-input" @click="$emit('click')">
    <text :class="{ 'c-select-input__placeholder': !text }">{{ text || placeholder }}</text>
    <wd-icon name="arrow-down" size="32rpx" color="#AFB3B7" custom-style="flex-shrink: 0"></wd-icon>
  </view>
</template>

<script lang="ts" setup>
  defineProps({
    placeholder: {
      type: String,
      default: '请选择',
    },
    text: {
      type: String,
      default: '',
    },
  });
  defineEmits(['click']);
</script>

<style lang="scss" scoped>
  .c-select-input {
    display: flex;
    align-items: center;
    padding: 24rpx 32rpx;
    border-radius: 16rpx;
    border: 2rpx solid rgba(62, 70, 84, 0.18);
    font-size: 26rpx;
    text:first-child {
      flex: 1 0 0;
    }
    &__placeholder {
      color: $uni-text-color-disable;
    }
  }
</style>
